<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3. 怎么给webgl绘制加速-静态批量绘制（多实例绘制）</title>
    <style>
        canvas{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

     <canvas width="600" height="600"></canvas>
     <script src="/common/lib/gl-renderer.js"></script>
    <script type="module">
        
        // 生成随机的三角形顶点
        function randomTriangle(x = 0, y = 0, rotation = 0.0, radius = 0.1 ){
            const a = rotation;
            const b = a + 2 * Math.PI / 3;
            const c = a + 4 * Math.PI / 3;

            return [
                [x +  radius * Math.cos(a), y +  radius * Math.sin(a)],
                [x +  radius * Math.cos(b), y +  radius * Math.sin(b)],
                [x +  radius * Math.cos(c), y +  radius * Math.sin(c)],
            ]
        }

        let canvas = document.querySelector("canvas");

        const renderer = new GlRenderer(canvas);

        (async function(){
           
            const vertex = /* glsl */ `
                precision highp float;
                
                attribute vec2 a_vertexPosition;
                attribute float id;

                uniform float uTime;

                highp float random(vec2 co) {  
                    highp float a = 12.9898;  
                    highp float b = 78.233;  
                    highp float c = 43758.5453;  
                    highp float dt= dot(co.xy ,vec2(a,b));  
                    highp float sn= mod(dt,3.14);  
                    return fract(sin(sn) * c);
                }

                varying vec3 vColor;
                
                void main() {
                    float t = id / 10000.0;
                    float alpha = 6.28 * random(vec2(uTime, 2.0 + t)); 
                    float c = cos(alpha); 
                    float s = sin(alpha);
                    mat3 modelMatrix = mat3(    
                        c, -s, 0,    
                        s, c, 0,    
                        2.0 * random(vec2(uTime, t)) - 1.0, 2.0 * random(vec2(uTime, 1.0 + t)) - 1.0, 1  
                    );
                    vColor = vec3(    
                        random(vec2(uTime, 4.0 + t)),    
                        random(vec2(uTime, 5.0 + t)),    
                        random(vec2(uTime, 6.0 + t))  
                    );
                    vec3 pos = modelMatrix * vec3(a_vertexPosition, 1);
                    gl_Position = vec4(pos, 1);
                }
            `;
            
            const fragment = /* glsl */ `
                precision highp float;

                varying vec3 vColor;
                
                void main() {
                    gl_FragColor = vec4(vColor,1.0);  
                }
            `;
            
            const program = renderer.compileSync(fragment, vertex);
            renderer.useProgram(program);
            
            const alpha = 2 * Math.PI / 3;
            const beta = 2 * alpha;
            const COUNT = 3000;

            renderer.setMeshData([{ 
                positions:[
                    [0, 0.1], 
                    [0.1 * Math.sin(alpha), 0.1 * Math.cos(alpha)], 
                    [0.1 * Math.sin(beta), 0.1 * Math.cos(beta)],
                ],
                instanceCount: COUNT,
                attributes:{
                    id:{ data: [ ...new Array(COUNT).keys()], divisor: 1 }
                }
            }]);
            
            function render(t) {
                renderer.uniforms.uTime = t;
                renderer.render();
                requestAnimationFrame(render);
            }

            render(0);

        })()

    </script>
</body>
</html>